<template>
  <ElTag
    v-if="dictLabel"
    :type="computedTagType"
    :size="size || 'small'"
    :effect="effect || 'light'"
    :hit="hit"
    :disable-transitions="disableTransitions"
  >
    {{ dictLabel }}
  </ElTag>
  <span v-else-if="value !== undefined && value !== null">{{ fallbackText || value }}</span>
  <span v-else-if="fallbackText">{{ fallbackText }}</span>
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'
import { ElTag } from 'element-plus'
import { useDict } from './useDict'

// Props定义
const props = defineProps<{
  /** 字典类型 */
  dictType: string
  /** 字典值 */
  value?: number | string
  /** 标签类型 */
  tagType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  /** 标签大小 */
  size?: 'large' | 'default' | 'small'
  /** 标签样式 */
  effect?: 'dark' | 'light' | 'plain'
  /** 是否带边框 */
  hit?: boolean
  /** 是否禁用过渡动画 */
  disableTransitions?: boolean
  /** 当未找到对应字典值时显示的文本 */
  fallbackText?: string
  /** 是否自动从字典数据中获取tagType */
  autoTagType?: boolean
}>()

// 使用共享的 useDict 缓存
const { dictData, loadDictData } = useDict(props.dictType)

// 计算属性：根据value获取对应的dictLabel
const dictLabel = computed(() => {
  if (props.value === undefined || props.value === null) return ''
  const item = dictData.value.find(
    item => item.dictValue?.toString() === props.value!.toString()
  )
  return item?.dictLabel || ''
})

// 计算属性：根据字典值自动获取标签类型
const computedTagType = computed(() => {
  // 如果手动指定了tagType，优先使用
  if (props.tagType) return props.tagType
  
  // 如果启用了自动标签类型，从字典数据中获取
  if (props.autoTagType && props.value !== undefined && props.value !== null) {
    const item = dictData.value.find(
      item => item.dictValue?.toString() === props.value!.toString()
    )
    
    // 从字典项的扩展属性中获取标签类型（如果API支持）
    if (item && 'extend1' in item && item.extend1) {
      return item.extend1 as 'primary' | 'success' | 'warning' | 'danger' | 'info'
    }
    
    // 根据字典标签进行智能匹配（优先使用dictLabel）
    const labelStr = item?.dictLabel || props.value!.toString()
    
    // 状态类标签类型映射
    if (labelStr.includes('成功') || labelStr.includes('完成') || labelStr.includes('正常') || labelStr.includes('已解决')) {
      return 'success'
    }
    if (labelStr.includes('警告') || labelStr.includes('待处理') || labelStr.includes('处理中') || labelStr.includes('待解决')) {
      return 'warning'
    }
    if (labelStr.includes('错误') || labelStr.includes('失败') || labelStr.includes('已取消') || labelStr.includes('异常')) {
      return 'danger'
    }
    if (labelStr.includes('高') || labelStr.includes('紧急')|| labelStr.includes('特急')) {
      return 'danger'
    }
    if (labelStr.includes('中') || labelStr.includes('普通')) {
      return 'warning'
    }
    if (labelStr.includes('低') || labelStr.includes('一般')) {
      return 'success'
    }
    
    // 根据数值范围进行匹配（适用于状态码）
    const numValue = Number(props.value)
    if (!isNaN(numValue)) {
      // 报事类型：10200-10299 系列
      if (numValue >= 10200 && numValue < 10300) {
        if (numValue % 10 === 0) return 'primary'  // 主类型
        if (numValue % 10 === 1) return 'success'  // 子类型1
        if (numValue % 10 === 2) return 'warning'  // 子类型2
        if (numValue % 10 === 3) return 'danger'   // 子类型3
        return 'info'
      }
      
      // 紧急程度：10310-10319 系列
      if (numValue >= 10310 && numValue < 10320) {
        if (numValue === 10311) return 'success'  // 低
        if (numValue === 10312) return 'warning'  // 中
        if (numValue === 10313) return 'danger'   // 高
        return 'info'
      }
      
      // 处理状态：10300-10309 系列
      if (numValue >= 10300 && numValue < 10310) {
        if (numValue === 10300) return 'info'     // 待处理
        if (numValue === 10301) return 'warning'  // 处理中
        if (numValue === 10302) return 'success'  // 已完成
        if (numValue === 10303) return 'danger'   // 已取消
        return 'info'
      }
      
      // 解决状态：10210-10219 系列
      if (numValue >= 10210 && numValue < 10220) {
        if (numValue === 10210) return 'warning'  // 待解决
        if (numValue === 10211) return 'success'  // 已解决
        return 'info'
      }
    }
  }
  
  // 默认返回info类型
  return 'info'
})

// 监听字典类型变化
watch(() => props.dictType, (newType) => {
  if (newType) {
    loadDictData()
  }
})

// 监听value变化（用于调试）
watch(() => props.value, () => {
  // 可以在这里添加调试逻辑
})

// 组件挂载时加载数据
onMounted(() => {
  if (props.dictType) {
    loadDictData()
  }
})

// 暴露方法供父组件调用
defineExpose({
  loadDictData,
  dictData,
  dictLabel
})
</script>

<style scoped>
:deep(.el-tag) {
  margin-right: 0;
}
</style>